<template>
	<view class="">
		<view style="height: 120rpx;">

		</view>
		<view class="nav">
			<!-- 菜单tabs -->
			<scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false"
				:scroll-into-view="scrollInto" :scroll-with-animation="true">
				<view v-for="(tab,index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id"
					:data-current="index" @click="ontabtap(tab)">
					<text class="uni-tab-item-title"
						:class="tab.id==scrollInto ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
				</view>
			</scroll-view>
			<!-- 排序筛选 -->
			<view class="sort-com">
				<view :class="activeIndex === 0 ? 'uni-tab-item-title-active' : ''" @click="doSort(0)">综合</view>
				<view :class="activeIndex === 1 ? 'uni-tab-item-title-active' : ''" @click="doSort(1)">利润比
					<uni-icons v-show="!lybAscend" :color="activeIndex === 1?'#007aff':'#5e6d82'" type="arrow-down"
						size="12" />
					<uni-icons v-show="lybAscend" :color="activeIndex === 1?'#007aff':'#5e6d82'" type="arrow-up"
						size="12" />
				</view>
				<view :class="activeIndex === 2 ? 'uni-tab-item-title-active' : ''" @click="doSort(2)">销量
					<uni-icons v-show="!salesVolumeAscend" :color="activeIndex === 2?'#007aff':'#5e6d82'"
						type="arrow-down" size="12" />
					<uni-icons v-show="salesVolumeAscend" :color="activeIndex === 2?'#007aff':'#5e6d82'" type="arrow-up"
						size="12" />
				</view>
				<view :class="activeIndex === 3 ? 'uni-tab-item-title-active' : ''" @click="doSort(3)">
					<!-- 筛选 -->
					<uni-icons v-show="true" :color="activeIndex === 3?'#007aff':'#5e6d82'" type="more-filled"
						size="15" />
				</view>
			</view>
			<view class="line-h"></view>
		</view>
		<screenDraw ref="screenDraw"></screenDraw>
	</view>
</template>

<script>
	import screenDraw from './screen-draw.vue'
	export default {
		components: {
			screenDraw
		},
		props: {
			goodsInfo: {
				type: Object,
				default: function(e) {
					return {}
				},
			}
		},
		data() {
			return {
				scrollInto: 'guanzhu',
				tabBars: [{
					name: '关注',
					id: 'guanzhu'
				}, {
					name: '推荐',
					id: 'tuijian'
				}, {
					name: '体育',
					id: 'tiyu'
				}, {
					name: '热点',
					id: 'redian'
				}, {
					name: '财经',
					id: 'caijing'
				}, {
					name: '娱乐',
					id: 'yule'
				}, {
					name: '军事',
					id: 'junshi'
				}, {
					name: '历史',
					id: 'lishi'
				}, {
					name: '本地',
					id: 'bendi'
				}, ],
				// 排序
				activeIndex: 0,
				lybAscend: true,
				salesVolumeAscend: true,

			}
		},
		methods: {
			ontabtap(tab) {
				this.scrollInto = tab.id
				//请求
			},
			// 筛选排序
			doSort(type) {
				this.activeIndex = type;
				switch (type) {
					case 0:
						break
					case 1:
						this.lybAscend = !this.lybAscend
						break
					case 2:
						this.salesVolumeAscend = !this.salesVolumeAscend
						break
					case 3:
						this.$refs.screenDraw.showDrawer()
						break
					default:
						break
				}

			}

		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		position: fixed;
		top: 0;
		z-index: 999;
		background-color: #ffffff;
	}

	.scroll-h {
		width: 750rpx;
		/* #ifdef H5 */
		width: 100%;
		/* #endif */
		height: 80rpx;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
		/* flex-wrap: nowrap; */
		/* border-color: #cccccc;
		border-bottom-style: solid;
		border-bottom-width: 1px; */
	}



	.line-h {
		height: 1rpx;
		background-color: #cccccc;
	}

	.uni-tab-item {
		/* #ifndef APP-PLUS */
		display: inline-block;
		/* #endif */
		flex-wrap: nowrap;
		padding-left: 34rpx;
		padding-right: 34rpx;
	}

	.uni-tab-item-title {
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.uni-tab-item-title-active {
		color: #007AFF;
	}

	// 排序筛选
	.sort-com {
		font-size: 24rpx;
		display: flex;
		justify-content: space-around;
		margin: 5rpx 0;
	}
</style>
